<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-S-'>/**
</span> * @fileOverview This class specifies the definition for a column of a grid.
 * @author dxq613@gmail.com
 * @ignore
 */


var	$ = require(&#39;jquery&#39;),
    BUI = require(&#39;bui-common&#39;),
    PREFIX = BUI.prefix,
	CLS_HD_TITLE = PREFIX + &#39;grid-hd-title&#39;,
    CLS_OPEN = PREFIX + &#39;grid-hd-open&#39;,
    SORT_PREFIX = &#39;sort-&#39;,
    SORT_ASC = &#39;ASC&#39;,
    SORT_DESC = &#39;DESC&#39;,
    CLS_TRIGGER = PREFIX + &#39;grid-hd-menu-trigger&#39;,
    CLS_HD_TRIGGER = &#39;grid-hd-menu-trigger&#39;;

<span id='BUI-Grid-ColumnView'>/**
</span>* 表格列的视图类
* @class BUI.Grid.ColumnView
* @extends BUI.Component.View
* @private
*/
var columnView = BUI.Component.View.extend({

<span id='global-method-setTplContent'>	/**
</span>	* @protected
    * @ignore
	*/
	setTplContent : function(attrs){
		var _self = this,
			sortTpl = _self.get(&#39;sortTpl&#39;),
            triggerTpl = _self.get(&#39;triggerTpl&#39;),
			el = _self.get(&#39;el&#39;),
            titleEl;

		columnView.superclass.setTplContent.call(_self,attrs);
        titleEl = el.find(&#39;.&#39; + CLS_HD_TITLE);
		$(sortTpl).insertAfter(titleEl);
        $(triggerTpl).insertAfter(titleEl);

	},
    //use template to fill the column
    _setContent:function () {
       this.setTplContent();
    },
    _uiSetShowMenu : function(v){
        var _self = this,
            triggerTpl = _self.get(&#39;triggerTpl&#39;),
            el = _self.get(&#39;el&#39;),
            titleEl = el.find(&#39;.&#39; + CLS_HD_TITLE);
        if(v){
            $(triggerTpl).insertAfter(titleEl);
        }else{
            el.find(&#39;.&#39; + CLS_TRIGGER).remove();
        }   
    },
    //set the title of column
    _uiSetTitle:function (title) {
        if (!this.get(&#39;rendered&#39;)) {
            return;
        }
        this._setContent();
    },
    //set the draggable of column
    _uiSetDraggable:function (v) {
        if (!this.get(&#39;rendered&#39;)) {
            return;
        }
        this._setContent();
    },
    //set the sortableof column
    _uiSetSortable:function (v) {

        if (!this.get(&#39;rendered&#39;)) {
            return;
        }
        this._setContent();
    },
    //set the template of column
    _uiSetTpl:function (v) {
        if (!this.get(&#39;rendered&#39;)) {
            return;
        }
        this._setContent();
    },
    //set the sort state of column
    _uiSetSortState:function (v) {
        var _self = this,
            el = _self.get(&#39;el&#39;),
            method = v ? &#39;addClass&#39; : &#39;removeClass&#39;,
            ascCls = SORT_PREFIX + &#39;asc&#39;,
            desCls = SORT_PREFIX + &#39;desc&#39;;
        el.removeClass(ascCls + &#39; &#39; + desCls);
        if (v === &#39;ASC&#39;) {
            el.addClass(ascCls);
        } else if (v === &#39;DESC&#39;) {
            el.addClass(desCls);
        }
    },
    //展开表头
    _uiSetOpen : function (v) {
        var _self = this,
            el = _self.get(&#39;el&#39;);
        if(v){
            el.addClass(CLS_OPEN);
        }else{
            el.removeClass(CLS_OPEN);
        }
    }
}, {
    ATTRS:{
        
<span id='BUI-Grid-ColumnView-property-sortTpl'>        /**
</span>         * @private
         */
        sortTpl : {
            view: true,
            getter: function(){
                var _self = this,
                    sortable = _self.get(&#39;sortable&#39;);
                if(sortable){
                    return &#39;&lt;span class=&quot;&#39; + PREFIX + &#39;grid-sort-icon&quot;&gt;&amp;nbsp;&lt;/span&gt;&#39;;
                }
                return &#39;&#39;;
            }
        },
        tpl:{
        }
    }
});

<span id='BUI-Grid-Column'>/**
</span> * 表格的列对象，存储列信息，此对象不会由用户创建，而是配置在Grid中
 * xclass:&#39;grid-column&#39;
 * &lt;pre&gt;&lt;code&gt;
 * columns = [{
 *        title : &#39;表头1&#39;,
 *        dataIndex :&#39;a&#39;,
 *        width:100
 *      },{
 *        title : &#39;表头2&#39;,
 *        dataIndex :&#39;b&#39;,
 *        visible : false, //隐藏
 *        width:200
 *      },{
 *        title : &#39;表头3&#39;,
 *        dataIndex : &#39;c&#39;,
 *        width:200
 *    }];
 * &lt;/code&gt;&lt;/pre&gt;
 * @class BUI.Grid.Column
 * @extends BUI.Component.Controller
 */
var column = BUI.Component.Controller.extend(
    {    //toggle sort state of this column ,if no sort state set &#39;ASC&#39;,else toggle &#39;ASC&#39; and &#39;DESC&#39;
        _toggleSortState:function () {
            var _self = this,
                sortState = _self.get(&#39;sortState&#39;),
                v = sortState ? (sortState === SORT_ASC ? SORT_DESC : SORT_ASC) : SORT_ASC;
            _self.set(&#39;sortState&#39;, v);
        },
<span id='global-method-performActionInternal'>        /**
</span>         * {BUI.Component.Controller#performActionInternal}
         * @ignore
         */
        performActionInternal:function (ev) {
            var _self = this,
                sender = $(ev.target),
                prefix = _self.get(&#39;prefixCls&#39;);
            if (sender.hasClass(prefix + CLS_HD_TRIGGER)) {

            } else {
                if (_self.get(&#39;sortable&#39;)) {
                    _self._toggleSortState();
                }
            }
            //_self.fire(&#39;click&#39;,{domTarget:ev.target});
        },
        _uiSetWidth : function(v){
            if(v){
                this.set(&#39;originWidth&#39;,v);
            }
        }
    }, {
        ATTRS:
        {
<span id='BUI-Grid-Column-property-elTagName'>            /**
</span>             * The tag name of the rendered column
             * @private
             */
            elTagName:{
                value:&#39;th&#39;
            },
<span id='BUI-Grid-Column-property-open'>            /**
</span>             * 表头展开显示菜单，
             * @type {Boolean}
             * @protected
             */
            open : {
                view : true,
                value : false
            },
<span id='BUI-Grid-Column-cfg-dataIndex'>            /**
</span>             * 此列对应显示数据的字段名称
             * &lt;pre&gt;&lt;code&gt;
             * {
             *     title : &#39;表头1&#39;,
             *     dataIndex :&#39;a&#39;, //对应的数据的字段名称，如 ： {a:&#39;123&#39;,b:&#39;456&#39;}
             *     width:100
             * }
             * &lt;/code&gt;&lt;/pre&gt;
             * @cfg {String} dataIndex
             */
<span id='BUI-Grid-Column-property-dataIndex'>            /**
</span>             * 此列对应显示数据的字段名称
             * @type {String}
             * @default {String} empty string
             */
            dataIndex:{
                view:true,
                value:&#39;&#39;
            },
<span id='BUI-Grid-Column-property-draggable'>            /**
</span>             * 是否可拖拽，暂时未支持
             * @private
             * @type {Boolean}
             * @defalut true
             */
            draggable:{
				sync:false,
                view:true,
                value:true
            },
<span id='BUI-Grid-Column-property-editor'>            /**
</span>             * 编辑器,用于可编辑表格中&lt;br&gt;
             * ** 常用编辑器 **
             *  - xtype 指的是表单字段的类型 {@link BUI.Form.Field}
             *  - 其他的配置项对应于表单字段的配置项
             * &lt;pre&gt;&lt;code&gt;
             * columns = [
             *   {title : &#39;文本&#39;,dataIndex :&#39;a&#39;,editor : {xtype : &#39;text&#39;}}, 
             *   {title : &#39;数字&#39;, dataIndex :&#39;b&#39;,editor : {xtype : &#39;number&#39;,rules : {required : true}}},
             *   {title : &#39;日期&#39;,dataIndex :&#39;c&#39;, editor : {xtype : &#39;date&#39;},renderer : Grid.Format.dateRenderer},
             *   {title : &#39;单选&#39;,dataIndex : &#39;d&#39;, editor : {xtype :&#39;select&#39;,items : enumObj},renderer : Grid.Format.enumRenderer(enumObj)},
             *   {title : &#39;多选&#39;,dataIndex : &#39;e&#39;, editor : {xtype :&#39;select&#39;,select:{multipleSelect : true},items : enumObj},
             *       renderer : Grid.Format.multipleItemsRenderer(enumObj)
             *   }
             * ]
             * &lt;/code&gt;&lt;/pre&gt;
             * @type {Object}
             */
            editor:{

            },
<span id='BUI-Grid-Column-property-focusable'>            /**
</span>             * 是否可以获取焦点
             * @protected
             */
            focusable:{
                value:false
            },
<span id='BUI-Grid-Column-cfg-fixed'>            /**
</span>             * 固定列,主要用于在首行显示一些特殊内容，如单选框，复选框，序号等。插件不能对此列进行特殊操作，如：移动位置，隐藏等
             * @cfg {Boolean} fixed
             */
            fixed : {
                value : false
            },
<span id='BUI-Grid-Column-cfg-id'>            /**
</span>             * 控件的编号
             * @cfg {String} id
             */
            id:{

            },
<span id='BUI-Grid-Column-cfg-renderer'>            /**
</span>             * 渲染表格单元格的格式化函数
             * &quot;function(value,obj,index){return value;}&quot;
             * &lt;pre&gt;&lt;code&gt;
             * {title : &#39;操作&#39;,renderer : function(){
             *     return &#39;&lt;span class=&quot;grid-command btn-edit&quot;&gt;编辑&lt;/span&gt;&#39;
             *   }}
             * &lt;/code&gt;&lt;/pre&gt;
             * @cfg {Function} renderer
             */
            renderer:{

            },
<span id='BUI-Grid-Column-property-resizable'>            /**
</span>             * 是否可以调整宽度，应用于拖拽或者自适应宽度时
             * @type {Boolean}
             * @protected
             * @default true
             */
            resizable:{
                value:true
            },
<span id='BUI-Grid-Column-cfg-sortable'>            /**
</span>             * 是否可以按照此列排序，如果设置true,那么点击列头时
             * &lt;pre&gt;&lt;code&gt;
             *     {title : &#39;数字&#39;, dataIndex :&#39;b&#39;,sortable : false},
             * &lt;/code&gt;&lt;/pre&gt;
             * @cfg {Boolean} [sortable=true]
             */
            sortable:{
				sync:false,
                view:true,
                value:true
            },
<span id='BUI-Grid-Column-property-sortState'>            /**
</span>             * 排序状态，当前排序是按照升序、降序。有3种值 null, &#39;ASC&#39;,&#39;DESC&#39;
             * @type {String}
             * @protected
             * @default null
             */
            sortState:{
                view:true,
                value:null
            },
<span id='BUI-Grid-Column-cfg-title'>            /**
</span>             * 列标题
             * @cfg {String} [title=&amp;#160;]
             */
<span id='BUI-Grid-Column-property-title'>            /**
</span>             * 列标题
             * &lt;pre&gt;&lt;code&gt;
             * var column = grid.findColumn(&#39;id&#39;);
             * column.get(&#39;title&#39;);
             * &lt;/code&gt;&lt;/pre&gt;
             * Note: to have a clickable header with no text displayed you can use the default of &amp;#160; aka &amp;nbsp;.
             * @type {String}
             * @default {String} &amp;#160;
             */
            title:{
				sync:false,
                view:true,
                value:&#39;&amp;#160;&#39;
            },

<span id='BUI-Grid-Column-cfg-width'>            /**
</span>             * 列的宽度,可以使数字或者百分比,不要使用 width : &#39;100&#39;或者width : &#39;100px&#39;
             * &lt;pre&gt;&lt;code&gt;
             *  {title : &#39;文本&#39;,width:100,dataIndex :&#39;a&#39;,editor : {xtype : &#39;text&#39;}}
             *  
             *  {title : &#39;文本&#39;,width:&#39;10%&#39;,dataIndex :&#39;a&#39;,editor : {xtype : &#39;text&#39;}}
             * &lt;/code&gt;&lt;/pre&gt;
             * @cfg {Number} [width = 80]
             */
            
<span id='BUI-Grid-Column-property-width'>            /**
</span>             * 列宽度
             * &lt;pre&gt;&lt;code&gt;
             *  grid.findColumn(id).set(&#39;width&#39;,200);
             * &lt;/code&gt;&lt;/pre&gt;
             * 
             * @type {Number}
             */
            width:{
                value:100
            },
<span id='BUI-Grid-Column-cfg-showMenu'>            /**
</span>             * 是否显示菜单
             * @cfg {Boolean} [showMenu=false]
             */
<span id='BUI-Grid-Column-property-showMenu'>            /**
</span>             * 是否显示菜单
             * @type {Boolean}
             * @default false
             */
            showMenu:{
                view:true,
                value:false
            },
<span id='BUI-Grid-Column-property-triggerTpl'>            /**
</span>             * @private
             * @type {Object}
             */
            triggerTpl:{
				view:true,
                value:&#39;&lt;span class=&quot;&#39; + CLS_TRIGGER + &#39;&quot;&gt;&lt;/span&gt;&#39;
                
            },
<span id='BUI-Grid-Column-property-tpl'>            /**
</span>             * An template used to create the internal structure inside this Component&#39;s encapsulating Element.
             * User can use the syntax of KISSY &#39;s template component.
             * Only in the configuration of the column can set this property.
             * @type {String}
             */
            tpl:{
				sync:false,
                view:true,
                value:&#39;&lt;div class=&quot;&#39; + PREFIX + &#39;grid-hd-inner&quot;&gt;&#39; +
                    &#39;&lt;span class=&quot;&#39; + CLS_HD_TITLE + &#39;&quot;&gt;{title}&lt;/span&gt;&#39; +
                    &#39;&lt;/div&gt;&#39;
            },
<span id='BUI-Grid-Column-cfg-cellTpl'>            /**
</span>             * 单元格的模板，在列上设置单元格的模板，可以在渲染单元格时使用，更改单元格的内容
             * @cfg {String} cellTpl
             */
<span id='BUI-Grid-Column-property-cellTpl'>            /**
</span>             * 单元格的模板，在列上设置单元格的模板，可以在渲染单元格时使用，更改单元格的内容
             * @type {String}
             */
            cellTpl:{
                value:&#39;&#39;
            },
<span id='BUI-Grid-Column-property-events'>            /**
</span>             * the collection of column&#39;s events
             * @protected
             * @type {Array}
             */
            events:{
                value:{
<span id='BUI-Grid-Column-event-afterWidthChange'>                /**
</span>                 * @event
                 * Fires when this column&#39;s width changed
                 * @param {jQuery.Event} e the event object
                 * @param {BUI.Grid.Column} target
                 */
                    &#39;afterWidthChange&#39; : true,
<span id='BUI-Grid-Column-event-afterSortStateChange'>                /**
</span>                 * @event
                 * Fires when this column&#39;s sort changed
                 * @param {jQuery.Event} e the event object
                 * @param {BUI.Grid.Column} e.target
                 */
                    &#39;afterSortStateChange&#39; : true,
<span id='BUI-Grid-Column-event-afterVisibleChange'>                /**
</span>                 * @event
                 * Fires when this column&#39;s hide or show
                 * @param {jQuery.Event} e the event object
                 * @param {BUI.Grid.Column} e.target
                 */
                    &#39;afterVisibleChange&#39; : true,
<span id='BUI-Grid-Column-event-click'>                /**
</span>                 * @event
                 * Fires when use clicks the column
                 * @param {jQuery.Event} e the event object
                 * @param {BUI.Grid.Column} e.target
                 * @param {HTMLElement} domTarget the dom target of this event
                 */
                    &#39;click&#39; : true,
<span id='BUI-Grid-Column-event-resize'>                /**
</span>                 * @event
                 * Fires after the component is resized.
                 * @param {BUI.Grid.Column} target
                 * @param {Number} adjWidth The box-adjusted width that was set
                 * @param {Number} adjHeight The box-adjusted height that was set
                 */
                    &#39;resize&#39; : true,
<span id='BUI-Grid-Column-event-move'>                /**
</span>                 * @event
                 * Fires after the component is moved.
                 * @param {jQuery.Event} e the event object
                 * @param {BUI.Grid.Column} e.target
                 * @param {Number} x The new x position
                 * @param {Number} y The new y position
                 */
                    &#39;move&#39; : true
                }
            },
<span id='BUI-Grid-Column-property-xview'>            /**
</span>             * @private
             */
            xview:{
                value:columnView
            }

        }
    }, {
        xclass:&#39;grid-hd&#39;,
        priority:1
    });

column.Empty = column.extend({

}, {
    ATTRS:{
        type:{
            value:&#39;empty&#39;
        },
        sortable:{
            view:true,
            value:false
        },
        width:{
            view:true,
            value:null
        },
        tpl:{
            view:true,
            value:&#39;&lt;div class=&quot;&#39; + PREFIX + &#39;grid-hd-inner&quot;&gt;&lt;/div&gt;&#39;
        }
    }
}, {
    xclass:&#39;grid-hd-empty&#39;,
    priority:1
});

module.exports = column;
</pre>
</body>
</html>
